import React, { useEffect } from 'react';
import { Animated, Easing, Platform } from 'react-native';
import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';
import RNBootSplash from 'react-native-bootsplash';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import CardStackStyleInterpolator from 'react-navigation-stack/src/views/StackView/StackViewStyleInterpolator';
import Root from './src/pages/root';

const tabContainer = createBottomTabNavigator(
    {
        shortVideo: {
            getScreen: () => require('./src/pages/tabs/short_video').default,
            navigationOptions: ({ navigation }) => ({
                showIcon: false,
                tabBarLabel: '短视频',
                headerShown: false,
            }),
        },
        live: {
            getScreen: () => require('./src/pages/tabs/live').default,
            navigationOptions: ({ navigation }) => ({
                elevation: 0,
                tabBarLabel: '直播',
                headerStyle: {
                    backgroundColor: '#000000',
                    textAlign: 'center',
                },
                headerTintColor: '#fff',
            }),
        },
    },
    {
        tabBarComponent: props => <Root {...props}/>,
        tabBarOptions: {
            activeTintColor: '#fff',
            inactiveTintColor: '#9c9c9c',
            tabStyle: {
                height: 58,
                backgroundColor: '#000',
            },
            showIcon: false,
            labelStyle: {
                fontSize: 16,
                flex: 1,
                lineHeight: 58,
            },
            style: {
                borderTopWidth: 0,
            },
        },
        navigationOptions: ({ navigation }) => {
            switch (navigation.state.index) {
                // 第一个短视频
                case 0:
                    return {
                        headerShown: false,
                        headerMode: 'none',
                    };

                case 1:
                    return {
                        title: '直播',
                        headerTitleStyle: {
                            flex: 1,
                            textAlign: 'center',
                        },
                    };
            }
        },
    },
);

const AppContainer = createAppContainer(
    createStackNavigator(
        {
            root: {
                screen: tabContainer,
            },
            liveRoom: {
                getScreen: () => require('./src/pages/live_room').default,
                navigationOptions: ({ navigation }) => ({
                    headerShown: false,
                    headerMode: 'none',
                }),
            },
            streamRoom: {
                getScreen: () => require('./src/pages/stream_room').default,
                navigationOptions: ({ navigation }) => ({
                    title: '房间设置',
                }),
            },
            stream: {
                getScreen: () => require('./src/pages/stream').default,
                navigationOptions: ({ navigation }) => ({
                    title: '我要直播',
                }),
            },
        },
        {
            initialRouteName: 'root',
            defaultNavigationOptions: {
                headerTintColor: '#fff',
                headerStyle: {
                    elevation: 0,
                    backgroundColor: '#000000',
                },
            },
            transitionConfig: () => (
                {
                    transitionSpec: {
                        duration: 600,
                        easing: Easing.out(Easing.poly(4)),
                        timing: Animated.timing,
                    },
                    screenInterpolator: (sceneProps) => CardStackStyleInterpolator.forHorizontal(sceneProps),
                }
            ),
        },
    ),
);

export default () => {
    let init = Promise.resolve();

    if (Platform.OS === 'android') {
        init = Promise.all([
            check(PERMISSIONS.ANDROID.READ_PHONE_STATE),
            check(PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE),
        ]).then(
            ([deviceInfoStatus, writeStorageStatus]) => {
                switch (deviceInfoStatus) {
                    case RESULTS.UNAVAILABLE:
                        break;
                    case RESULTS.DENIED:
                        request(
                            PERMISSIONS.ANDROID.READ_PHONE_STATE,
                            {
                                title: '获取手机号、IMEI、IMSI',
                            },
                        ).then(result => {
                        });
                        break;
                    case RESULTS.GRANTED:
                        break;
                    case RESULTS.BLOCKED:
                        break;
                }

                switch (writeStorageStatus) {
                    case RESULTS.UNAVAILABLE:
                        break;
                    case RESULTS.DENIED:
                        request(
                            PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE,
                            {
                                title: '读写设备上的照片及文件',
                            },
                        ).then(result => {
                            console.log(result);
                        });
                        break;
                    case RESULTS.GRANTED:
                        break;
                    case RESULTS.BLOCKED:
                        break;
                }
            },
        );
    }

    useEffect(
        () => {
            init
                .finally(() => RNBootSplash.hide({ duration: 250 }));
        },
        [],
    );

    return (
        <SafeAreaProvider>
            <AppContainer/>
        </SafeAreaProvider>
    );
}
